<template>
  <div class="packet-wrap">
    <div class="packet-box">
      <div class="title"><span class="nickname">{{nickname}}</span>在蓝聘APP抢到了<span class="nickname">{{money}}</span>元现金红包，邀请您一起去抢！
      </div>
      <div class="money">{{money}}</div>
      <div class="btn" @click="join"><img src="./packetbtn.png" class="packet-btn" onclick="return false"/></div>
    </div>

    <div class="rule-title">
      <div class="word">活动规则</div>
    </div>

    <div class="rule-box">
      <p>1.本次红包雨活动需要用户登录才能进行抢红包</p>
      <p>2.每天定时会有三波红包雨，每位蓝聘用户每天最多可抢三次</p>
      <p>2.每天定时会有三波红包雨，每位蓝聘用户每天最多可抢三次</p>
      <p>3.抢到的红包金额会放入蓝聘账户中，蓝聘用户可以申请提现</p>
      <p>4.本活动最终解释权归蓝聘平台所有</p>
    </div>
  </div>
</template>

<script>
  import {getUrlKey, toDecimal} from "../../config/util"

  export default {
    data() {
      return {
        nickname: "",
        money: ""
      }
    },
    mounted() {
      this.nickname = getUrlKey("nickname");
      this.money = getUrlKey("money");
      if (this.nickname != "" || this.nickname != undefined) {
        this.nickname = decodeURI(this.nickname);
      }
      if (this.money != "" || this.nickname != undefined) {
        this.money = toDecimal(this.money)
      } else {
        this.money = 0.00;
      }
    },
    methods: {
      join() {
        window.location.href = "https://url.cn/5AUAFDU";
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .packet-wrap
    display: flex
    justify-content: center
    width: 100%
    height: 100%
    background: url("./packet.png") no-repeat
    background-size: 100% 100%
    overflow: hidden
    .packet-box
      position: absolute
      top: 33.8%
      width: 8.56rem
      height: 6.64rem
      background: url("./packetbox.png") no-repeat
      background-size: 100% 100%
      .title
        width: 90%
        margin: 0 auto
        margin-top: 0.733rem
        font-size: 0.4rem
        color: #FFFFFF
        line-height: 0.533rem
        text-indent: 0.826666rem
        .nickname
          color: rgba(255, 255, 0, 1)
      .money
        text-align: center
        margin-top: 2.08rem
        font-size: 0.573rem
        color: rgba(255, 255, 255, 1)
      .btn
        width: 6.4rem
        height: 1.2rem
        margin: 0 auto
        margin-top: 0.507rem
        .packet-btn
          width: 100%
          height: 100%
    .rule-title
      position: absolute
      width: 7.32rem
      height: 0.6rem
      background: url("./packetrule.png") no-repeat
      background-size: 100% 100%
      bottom: 20.5%
      .word
        display: flex
        justify-content: center
        align-items: center
        width: 7.32rem
        height: 0.6rem
        font-size: 0.387rem
        color: rgba(255, 255, 255, 1)
        text-shadow: 0rem 1px 1px rgba(0, 36, 61, 0.17)

    .rule-box
      position: absolute
      bottom: 0.48rem
      width: 90%
      font-size: 0.333rem
      color: #fff
      line-height: 0.56rem
</style>
